//1.引入Vue
import Vue from 'vue';


//2.引入Vuex
import Vuex from 'vuex';

import axios from 'axios'



//3.Vuex本质是Vue的一个插件,提供了各种方法供Vue使用,所有我们要让Vue使用Vuex这个插件
Vue.use(Vuex);

//创建一个state对象给store对象的配置项
const state = {
    count: 0,
    price: 99,
    movieList: []
}

//创建一个mutations对象
//更改Vuex的store中的状态的唯一办法就是提交mutation
//moutation中函数的第一个参数就是当前的state对象
//既然Vuex的store中的状态是响应式的,Vuex中的mutation也需要与使用Vue一样遵守一些注意事件(修改数据的注意事项)
const mutations = {
    increment(state) {
        state.count++
    },
    // mutation中的函数的第二参数载荷(payload) 都是接收commit的传参
    //vuex还是希望payload是一个对象,这样可以传递多个参数
    incrementN(state, {
        n
    }) {
        state.count += n
    },

    setMovieList(state, movieList) {
        state.movieList = movieList
    }

    //一条重要的原则就是要记住mutation 必须是同步函数,如果是异步的,我们无法在工具中追踪数据的变化
}

/* 
Action 类似mutation,不同在于:
    Action 提交的是mutation,而不是直接变更状态
    Action 可以包含任意异步操作
*/
const actions = {
    //因为actions中一定会调用commit去调用mutation,所以action中的函数,需要接收一个对象,对象中提供一个commit方法
    incrementWait({
        commit
    }) {
        setTimeout(() => {
            //我们不要在action中操作数据
            //当异步完成以后,把数据交给mutation去操作数据
            commit('increment')
        }, 2000)
    },

    incrementNWait({
        commit
    }, payload) {
        setTimeout(() => {
            commit('incrementN', payload)
        }, 2000)
    },

    async getMovieList({
        commit
    }) {
        const result = await axios.get(
            "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
        )

        commit('setMovieList', result.data.data.list)
    }
}


//getters对象
//有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数等等 需要计算,我们就用到了getters 类似vue中的计算属性
//getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
const getters = {
    //因为数据是state派生出来的,所以getters中的函数接收一个参数是state
    myMovieList(state) {
        return state.movieList.filter((movie) => {
            return movie.albumName.length < 7 && movie.albumName.length > 3
        })
    },

    //可以传参的getters
    yourMovieList(state) {
        //如果计算属性在计算的时候,需要接收参数,则getters函数需要返回一个函数
        return ({
            start,
            end
        }) => {
            return state.movieList.filter((movie) => {
                return movie.albumName.length < end && movie.albumName.length > start
            })
        }
    }
}


//4.创建一个store(vuex的实例),参数是一个配置对象,在配置对象中可以配置actions,mutations,state,getters,等等
//暴露出去供Vue实例的配置项挂载
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})